<template>
  <el-dialog
    title="选择父级模型"
    :visible.sync="visible"
    width="60%"
    @close="handleClose"
  >
    <div class="selector-container">
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="基模名称">
          <el-input
            v-model="searchForm.modelName"
            placeholder="请输入基模名称"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        border
        stripe
        @selection-change="handleSelectionChange"
        :row-key="(row) => row.baseId"
        ref="modelTable"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="baseId" label="基模ID" width="100" />
        <el-table-column prop="modelName" label="基模名称" width="200" />
        <el-table-column prop="modelPath" label="模型路径" show-overflow-tooltip />
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageDto.page"
        :page-sizes="[5, 10, 20]"
        :page-size="pageDto.size"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="margin-top: 10px; text-align: right"
      />
      <div style="text-align: right; margin-top: 10px">
        <el-button type="danger" @click="handleClose">取消</el-button>
        <el-button
          type="success"
          @click="confirmSelect"
          :disabled="selectedRows.length !== 1"
        >
          确认选择
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'ModelBaseSelector',
  props: { 
    visible: { 
      type: Boolean, 
      default: false 
    } 
  },
  data() {
    return {
      searchForm: {},
      // 分页参数（对齐1.txt的modelBase结构）
      pageDto: { 
        page: 1, 
        size: 10, 
        modelBaseModels: { isLeaf: 0 } // 只查询非叶子节点
      },
      tableData: [],
      total: 0,
      selectedRows: [] // 存储选中的行（单选）
    };
  },
  methods: {
    // 查询数据
    queryData() {
      this.$api.modelBaseApi.queryByPage(this.pageDto)
        .then((res) => {
          if (res.data.code === 1) {
            this.tableData = res.data.data.list || [];
            this.total = res.data.data.total || 0;
          }
        });
    },
    // 搜索查询
    handleQuery() {
      this.pageDto.modelBase.modelName = this.searchForm.modelName;
      this.pageDto.page = 1;
      this.queryData();
    },
    // 重置查询（对齐4.txt的重置逻辑）
    resetQuery() {
      this.searchForm = {};
      this.pageDto = { 
        page: 1, 
        size: 10, 
        modelBase: { isLeaf: 0 } // 保留非叶子节点查询条件
      };
      this.queryData();
    },
    // 处理表格选择（单选）
    handleSelectionChange(val) {
      this.selectedRows = val;
    },
    // 确认选择（确保只选中一条）
    confirmSelect() {
      if (this.selectedRows.length !== 1) {
        this.$notify.warning({ title: '提示', message: '请选择一条数据' });
        return;
      }
      const selectedRow = this.selectedRows[0];
      this.$emit('selected', selectedRow.baseId, selectedRow.modelName);
      this.handleClose();
    },
    // 关闭选择器（清空选择状态）
    handleClose() {
      this.selectedRows = [];
      this.$refs.modelTable?.clearSelection(); // 清空表格选择
      this.$emit('close');
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pageDto.size = val;
      this.queryData();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pageDto.page = val;
      this.queryData();
    }
  },
  // 监听显示状态，重新查询数据
  watch: {
    visible(newVal) {
      if (newVal) {
        this.queryData();
      }
    }
  }
};
</script>
<style scoped>
.selector-container {
  padding: 10px;
}
.search-form {
  margin-bottom: 10px;
}
</style>